﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Item Slicer</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>
    
    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var columnNames = ["Name", "Class", "Gender", "Math", "English", "Total Score"];
            var data = [["Student1", 1, "female", "69", "66", "135"],
                     ["Student2", 1, "female", "99", "85", "184"],
                     ["Student3", 1, "male", "78", "77", "155"],
                     ["Student4", 1, "male", "54", "80", "134"],
                     ["Student7", 2, "male", "87", "98", "185"],
                     ["Student8", 2, "male", "78", "85", "163"],
                     ["Student9", 2, "female", "100", "90", "190"],
                     ["Student10", 2, "female", "68", "54", "122"],
                     ["Student11", 2, "female", "97", "100", "197"],
                     ["Student12", 2, "female", "81", "90", "171"],
                     ["Student15", 2, "female", "90", "68", "158"],
                     ["Student16", 3, "male", "86", "70", "156"],
                     ["Student17", 3, "male", "88", "89", "177"],
                     ["Student18", 3, "male", "54", "80", "134"],
                     ["Student19", 3, "male", "81", "75", "156"],
                     ["Student23", 3, "female", "78", "98", "176"],
                     ["Student24", 3, "female", "90", "98", "188"],
                     ["Student25", 3, "male", "60", "30", "90"],
                     ["Student26", 3, "female", "0", "0", "0"],
                     ["Student27", 3, "female", "100", "100", "200"],
                     ["Student28", 3, "male", "89", "78", "167"]
            ];
            var slicerData = new GcSpread.Slicer.GeneralSlicerData(data, columnNames);
            var onFiltered = slicerData.onFiltered;
            slicerData.onFiltered = function () {
                onFiltered.call(slicerData);
                refreshList(slicerData);
            }

            var nameSlicer = new GcSpread.Sheets.ItemSlicer("Name");
            nameSlicer.setData(slicerData, "Name");
            nameSlicer.height(200);
            nameSlicer.width(180)
            nameSlicer.columnCount(2);
            $("#nameSlicerHost").append(nameSlicer.getDOMElement());

            var classSlicer = new GcSpread.Sheets.ItemSlicer("Class");
            classSlicer.setData(slicerData, "Class");
            classSlicer.height(200);
            classSlicer.width(180)
            $("#classSlicerHost").append(classSlicer.getDOMElement());

            initList(data, columnNames);
        });
    
        function initList(data, columnNames) {
            var tableStr = "<table border='1' cellpadding='0' cellspacing='0'><tr>";
            for (var i = 0; i < columnNames.length; i++) {
                tableStr += "<th>" + columnNames[i] + "</th>";
            }
            tableStr += "</tr>";

            for (var i = 0; i < data.length; i++) {
                tableStr += "<tr>";
                for (var j = 0; j < data[i].length; j++) {
                    tableStr += "<td>" + data[i][j] + "</td>";
                }
                tableStr += "</tr>";
            }
            tableStr += "</table>";
            $listTable = $(tableStr);
            $("#ss").append($listTable);
        }

        function refreshList(slicerData) {
            var filteredRowIndexs = slicerData.getFilteredRowIndexes();
            var trs = $listTable.find("tr");
            for (var i = 0; i < slicerData.data.length; i++) {
                if (filteredRowIndexs.indexOf(i) !== -1) {
                    $(trs[i + 1]).show();
                } else {
                    $(trs[i + 1]).hide();
                }
            }
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div style="float: left;">
            <div id="nameSlicerHost"></div>
            <div id="classSlicerHost" style="margin-top: 210px;"></div>
        </div>
        <div id="ss" style="margin-left: 190px;"></div>
    </div>
</body>
</html>
